<template>
  <div>
    <h1>vuex数据</h1>
    <!-- <p>{{ state.motto }} ---- {{ state.words }}</p> -->
    <h3>{{ motto }} ---- {{ words }}</h3>
  </div>
</template>

<script>
// 先导入useStore实例再使用const store = useStore();
import { useStore } from "vuex";
import { toRefs } from "vue";
export default {
  name: "AboutView",
  setup() {
    const store = useStore(); // 固定写法  等价于vue2的 this.$store
    console.log(store.state); // Proxy {motto: '要争气，因为心里憋着太多的不服气！', words: '世界这么大，我想去看看'}  也是具备响应式的

    // 如果在dom中不想这么长的展示store.state.什么的，写法太长。因此，可以在return里面返回 state: store.state,这样,在dom渲染中直接打点调用state.motto
    // 如果不想打点调用，方式更简单，也更懒哦，就在return里返回...toRefs(store.state)，dom中渲染时直接写属性名即可!
    return {
      // state: store.state, // 是个proxy对象
      ...toRefs(store.state),
    };
  },
};
</script>

<style lang="less" scoped></style>
